<template>
	<view class="page">
		<view class="top">
			<up-row customStyle="flex-wrap: wrap;" class="user">
				<up-col span="12">
					<up-text text="欢迎您" color="#fff" size="40rpx" style="margin-bottom: 10rpx;"></up-text>
					<up-text color="#fff" size="40rpx" :text="userInfo?.nickName" style="margin-bottom: 10rpx;"></up-text>
				</up-col>
				
				<up-col span="12" @click="jump('/pages/account/carList/index?status=0')">
					<up-text :text="selectedShow?'暂无数据':carInfo.vehicleModel" size="36rpx" color="#fff" prefixIcon="arrow-down" iconStyle="color:'#fff';margin-right:10rpx"></up-text>
				</up-col>
				
				<!-- 车辆状态 -->
				<up-col style="margin-top: 20rpx;" span="6" v-for="(item,index) in carInfoList" :key="index">
					<view class="icon flex" style="margin-bottom: 20rpx;">
						<u-image width="36rpx" height="36rpx" mode="aspectFit" style="margin-right: 20rpx;" :src="item.img"></u-image>
						<up-text :text="item.title" color="#8E9397" size="34"></up-text>
					</view>
					
					<up-text style="margin-left:20rpx;" :text="item.text" color="#fff" size="40"></up-text>
				</up-col>
			</up-row>

			
		</view>

		<view class="content">
			<!-- 汽车 -->
			<view class="car">
				<!-- 车辆概念图 -->
				<view class="carImage" v-if="selectedShow || carInfo.image.length == 0">
					<image src="../../static/home/car.png"></image>
				</view>

				<view class="carImage" v-else>
					<image :src="imgUrl+carInfo.image"></image>
				</view>

				<u-button class="addCarBtn"  @click="jump('/pages/bindingCar/bindingCar')">绑定车辆</u-button>
			</view>
			
			<view class="vehicleModel vehicleModelImg" v-for="item in listItem" @click="jump(item.url)">
				<up-row customStyle="flex-wrap: wrap;" class="vehicleModelLeft">
					<up-col span="12">
						<up-text bold :text="item.name" color="black" size="35" suffixIcon="arrow-right" iconStyle="margin-left:20rpx"></up-text>
					</up-col>
					<up-col span="12">
						<up-text  text="Car owner service" color="#D9DBDD" size="24" iconStyle="margin-top:20rpx"></up-text>
					</up-col>
					<up-col span="5" >
						<up-button class="vehicleModelBtn" v-if="item.name == '车辆控制'" @click="jump(item.url)">一键启动</up-button>
					</up-col>
				</up-row>
			</view>
			
			<!-- 车主服务 -->
				<up-row customStyle="flex-wrap: wrap;width: 60%;margin:40rpx 0">
					<up-col span="0.3">
						<view style="width: 6rpx;height: 40rpx;background-color: #307EF3;"></view>
					</up-col>
					<up-col span="5">
						<up-text text="车主服务" color="black" size="35"></up-text>
					</up-col>
					<up-col span="6">
						<up-text text="Car owner service" color="#D9DBDD" size="24"></up-text>
					</up-col>
				</up-row>
				
				<up-row customStyle="width: 100%;">
					<up-col style="flex-direction: row;" offset="0.3" span="5.7" class="carServiceItem flex" @click="jump('/pages/carMaintenance/carMaintenance')">
						<u-image width="100rpx" height="100rpx"  mode="aspectFit"  src="../../static/home/yuyue.png"></u-image>
						<up-text style="margin-left:5%" text="维保预约" color="black" size="30" suffixIcon="arrow-right" iconStyle="margin-left:20rpx"></up-text>
					</up-col>
					<up-col style="flex-direction: row;" offset="0.3" span="5.7" class="carServiceItem flex" @click="jump('/pages/carMaintenance/carHistory')">
						<u-image width="100rpx" height="100rpx" mode="aspectFit" src="../../static/home/history.png"></u-image>
						<up-text style="margin-left:5%" text="维保历史" color="black" size="30" suffixIcon="arrow-right" iconStyle="margin-left:20rpx"></up-text>
					</up-col>
				</up-row>
		</view>
		
		<u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
	import UserMixin from "@/mixins/UserMixin.js"
	import  store  from '../../store/index.js';
	import { selected } from '@/config/api/car.js'
	export default{
		mixins: [UserMixin],
		data() {
			return{
				imgUrl: uni.$u.http.config.baseURL,
				carInfo: store.state.$activeCar,
				listItem: [{
						url: "/pages/vehicleControl/vehicleControl",
						name: "车辆控制"
					},
					{
						url: "/pages/smartKey/smartKey",
						name: "智能钥匙"
					}, {
						url: "/pages/carState/carState",
						name: "车辆状态"
					}
				],
				
				carInfoList:[
					{
						title:"当前电量",
						img:"../../static/home/dianliang.png",
						text:'',
					},
					{
						title:"续航里程",
						img:"../../static/home/xuhang.png",
						text:'',
					}
				],
				
				selectedShow:true,
			}
		},
		
		methods:{
			jump(url) {
				uni.navigateTo({
					url
				})
			},
			
			getSelected() {
				selected().then(res => {				
					if(res == ""){
						this.selectedShow == true
						this.$refs.uToasts.show({
							message:"暂无默认车辆信息，请先绑定车辆!"
						})	
					}else{
						store.dispatch("setActiveCar", res)
						this.carInfo = res
						this.carInfoList[0].text = store.state.$activeCar.dumpEnergy==undefined?'暂无数据':store.state.$activeCar.dumpEnergy + '%'
						this.carInfoList[1].text = store.state.$activeCar.remainingMileage==undefined?'暂无数据':store.state.$activeCar.remainingMileage+'km'
						this.selectedShow = false
					}
				})
			
			}
		},
		
		onShow(){
			this.getSelected()
		}
	}
</script>

<style scoped>
	/* 公共间距 */
	.content,
	.carInfo,
	.user
	{
		padding: 20rpx 30rpx;
	}

	/* 顶部背景图 */
	.top {
		padding-top: 50rpx;
		padding-bottom: 230rpx;
		color: white;
		background: url('../../static/home/homeCar.png');
	}

	/* 汽车 */
	.car {
		margin-top: -270rpx;
	}

	/* 汽车概念图 */
	.car .carImage {
		text-align: center;
	}

	.car .carImage image {
		width: 600rpx;
		height: 400rpx;
	}

	.addCarBtn {
		background-color: #307EF3;
		color: white;
		width: 80%;
		font-size: 30rpx;
		border-radius: 40rpx;
		height: 80rpx;
	}

	/* 车辆控制 */
	.vehicleModel {
		position: relative;
		width: 100%;
		height: 300rpx;
		background-size: 100% 100%;
	}
	
	.vehicleModelCar{
		width: 80%;
		padding:0 30rpx;
		border-radius: 20rpx;
		border: 2rpx solid #d9d9d9;
		box-shadow: 1rpx 1rpx 1rpx #d9d9d9;
	}
	
	.vehicleModelImg{
		background-image: url("../../static/home/carImg.png");
	}

	/* 车辆控制文字说明 */
	.vehicleModelLeft {
		margin: 30rpx 50rpx;
		position: absolute;
	}
	
	.vehicleModelBtn {
		color: white;
		height: 70rpx;
		background-color: #307EF3;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.carServiceItem {
		margin-left: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		box-shadow: 2px 2px 1rpx #d9d9d9;
	}
</style>